<template>
    <li class="textli">
      <div class="textIcon"><i><span></span></i></div>
      <div class="textInfo">
        <p class="logisticsTxt">{{filterTxt}}</p>
        <p class="logisticsTime">{{infos.time}}</p>
      </div>
    </li>
</template>

<script>
  export default {
    props:{
      infos:{
        type: Object
      }
    },
    computed:{
      filterTxt(){
        return this.infos.content.replace(/�/g,'')
      }
    }
  }
</script>

<style scoped>
.textUl li{
  font-size: 28rpx;
  line-height: 40rpx;
  height: auto;
  display: flex;
}
.textUl li .textIcon{
  width: 2rpx;
  height: auto;
  background: #ddd;
}
.textUl li .textIcon i{
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #ddd;
  position: relative;
  left: -10rpx;
  top: 30rpx;
}
.textUl li .textIcon span{
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #4ecc80;
  display: none;
}
.textUl li .textInfo{
  color: #969696;
  padding: 20rpx 0;
  margin-left: 40rpx;
  width: 100%;
}
.textUl li .textInfo .logisticsTime{
  font-size: 24rpx;
  line-height: 48rpx;
}
.textUl li:first-child .textInfo{
  color: #1cb665;
}
.textUl li:first-child .textIcon i{
  top: 0;
  width: 20px;
  height: 20px;
  background: #c6efd6;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textUl li:first-child .textIcon span{
  display: block;
}
.lackLogistics{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackLogistics .lackLogisticsTxt{
  margin-top: 50%;
}
.lackLogistics .lackLogisticsTxt div{
  width: 140rpx;
  height: 148rpx;
  margin: 0 auto;
}
.lackLogistics .lackLogisticsTxt div img{
  width: 100%;
  height: 100%;  
}
.lackLogistics .lackLogisticsTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}

</style>
